import React ,{ Component }from 'react';
import { Breadcrumb } from 'antd';
import './index.scss';
import { connect } from 'react-redux';
import * as actionCreators from '../../store/actionCreators';
import {withRouter, Link } from 'react-router-dom'


class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
            priList: [
                {
                    id: null,
                    creator: null,
                    createTime: null,
                    updateTime: null,
                    privilegeId: "8SgR63tn0D5OTTnquLAKzZBcC",
                    privilegeName: "系统管理",
                    code: "SYS_XTGL",
                    description: null,
                    targetId: "3ZfyyFUFzRg00dyy2rf38a1o0",
                    url: "/index",
                    style: "gear-b",
                    roleId: "140SFUHoqWwsgmPFZ3AdzWLas",
                    childPrivilege: [
                        {
                            id: null,
                            creator: null,
                            createTime: null,
                            updateTime: null,
                            privilegeId: "zBq1YcahPOtbRrpPKCLwTGh5M",
                            privilegeName: "菜单管理",
                            code: "SYS_XTGL_CDGL",
                            description: null,
                            targetId: "XMIpt5i9U84MMmR9WPctct4Py",
                            url: "/index/menu",
                            style: "",
                            roleId: null,
                            childPrivilege: null
                        },
                        {
                            id: null,
                            creator: null,
                            createTime: null,
                            updateTime: null,
                            privilegeId: "7EsF4vUiTK8tz58xFHuh6H4mV",
                            privilegeName: " HOME",
                            code: "SYS_XTGL_BZDLXGL",
                            description: null,
                            targetId: "OePPSouYXYFUJHvmFE8QkH7oZ",
                            url: "/index/home",
                            style: "",
                            roleId: null,
                            childPrivilege: null
                        }
                    ]
                },
                {
                    id: null,
                    creator: null,
                    createTime: null,
                    updateTime: null,
                    privilegeId: "1111",
                    privilegeName: "HOME主頁",
                    code: "SYS_XTGL_CDGL",
                    description: null,
                    targetId: "XMIpt5i9U84MMmR9WPctct4Py",
                    url: "/home",
                    style: "",
                    roleId: null,
                    childPrivilege: null
                }
            ],
            breadCrumbMap: new Map(),
            extraBreadcrumbItems: []
        }
    }
    getBreadCrumbMap(arr) {
        if (!arr || arr.length === 0) {
            return;
        }
        for (let i = 0,len = arr.length; i < len; i++) {
            if (!this.state.breadCrumbMap.has(arr[i].url)) {
                this.state.breadCrumbMap.set(arr[i].url,arr[i].privilegeName);
            }
            this.getBreadCrumbMap(arr[i].childPrivilege);
        }
    }

    componentDidMount() {
        this.doSplit();
    }

    componentWillMount() {
        this.getBreadCrumbMap(this.state.priList);
        this.props.history.listen(() => {
            this.doSplit();
        })
    }

    doSplit() {
        this.state.extraBreadcrumbItems = [];
        let pathSnippets = this.props.history.location.pathname.split('/').filter(i => i);
        let extraBreadcrumbItems = pathSnippets.map((item,index) => {
            let url = `/${pathSnippets.slice(0,index + 1).join('/')}`;
            return <Breadcrumb.Item key={url}>
                <Link to={url}>
                    {this.state.breadCrumbMap.get(url)}
                </Link>
            </Breadcrumb.Item>
        });
        this.setState({
            extraBreadcrumbItems : [...extraBreadcrumbItems]
        });
    }


    navigateTo(item) {
        this.props.history.push(item.url);
    }

    render() {
        return (
            <React.Fragment>
                <Breadcrumb>
                    {this.state.extraBreadcrumbItems}
                </Breadcrumb>
            </React.Fragment>
        );
    }
}
const mapStateToProps = (state) => {
    return {
        loginUser: state.get('loginUser')
    }
}

const mapDispatchToProps = (dispatch) => ({
    setLoginUser(data) {
        const action = actionCreators.getLoginUser(data);
        dispatch(action);
    }
})
export default withRouter(connect(mapStateToProps,mapDispatchToProps)(Index));
